<template>
  <div>
    <h1>Alerts（提示框）</h1>
    <p>
      v-alert 组件用于通过使用上下文类型图标和颜色向用户传达重要信息。
      这些默认类型有 4 种变量： success, info, warning, 和 error.
      默认图标可代表每种类型所传达的不同意思。
      也可以自定义提示框的许多部分，例如 border, icon, 和 color
      以适应几乎所有情况。
    </p>
    <ul>
      <li
        class="font-weight-black"
        v-for="(item, index) in attritems"
        v-bind:key="index"
      >
        {{ item.name }} : {{ item.desc }} ;
      </li>
    </ul>

    <br />
    <br />
    <h2>示例</h2>
    <div>
      <v-alert border="top" color="red lighten-2" dark>
        I'm an alert with a top border and red color, border="top" color="red
        lighten-2"
      </v-alert>
      <v-alert border="right" color="blue-grey" dark>
        I'm an alert with a right border and blue-grey color, border="right"
        color="blue-grey" dark
      </v-alert>
      <v-alert border="bottom" color="pink darken-1" dark>
        I'm an alert with a bottom border and pink color, border="bottom"
        color="pink darken-1" dark
      </v-alert>
      <v-alert border="left" color="indigo" dark>
        I'm an alert with a border left type info, border="left" color="indigo"
        dark
      </v-alert>
    </div>

    <br />
    <h3>彩色</h3>
    <p>
      colored-border 属性会移除警报背景，以突出 border属性 。 如果设置了
      type，它将使用类型的默认颜色。 如果没有设置 color 或
      type，颜色将默认为所应用的主题的反色（黑色代表浅色，白色/灰色代表深色）。
    </p>
    <div>
      <v-alert
        border="left"
        colored-border
        color="deep-purple accent-4"
        elevation="2"
      >
        Aliquam eu nunc. Fusce commodo aliquam arcu. In consectetuer turpis ut
        velit. Nulla facilisi.. Morbi mollis tellus ac sapien. Fusce vel dui.
        Praesent ut ligula non mi varius sagittis. Vivamus consectetuer
        hendrerit lacus. Suspendisse enim turpis, dictum sed, iaculis a,
        condimentum nec, nisi.
      </v-alert>
      <v-alert border="top" colored-border type="info" elevation="2">
        Vestibulum ullamcorper mauris at ligula. Nam pretium turpis et arcu. Ut
        varius tincidunt libero. Curabitur ligula sapien, tincidunt non, euismod
        vitae, posuere imperdiet, leo. Morbi nec metus.
      </v-alert>
      <v-alert border="bottom" colored-border type="warning" elevation="2">
        Sed in libero ut nibh placerat accumsan. Phasellus leo dolor, tempus
        non, auctor et, hendrerit quis, nisi. Phasellus leo dolor, tempus non,
        auctor et, hendrerit quis, nisi. Sed consequat, leo eget bibendum
        sodales, augue velit cursus nunc, quis gravida magna mi a libero. Donec
        elit libero, sodales nec, volutpat a, suscipit non, turpis.
      </v-alert>
      <v-alert border="right" colored-border type="error" elevation="2">
        Fusce commodo aliquam arcu. Pellentesque posuere. Phasellus tempus.
        Donec posuere vulputate arcu.
      </v-alert>
    </div>
    <br />
    <br />
    <div>
      <v-alert dense type="info">
        I'm a dense alert with a <strong>type</strong> of info
      </v-alert>
      <v-alert dense text type="success">
        I'm a dense alert with the <strong>text</strong> prop and a
        <strong>type</strong> of success
      </v-alert>
      <v-alert dense border="left" type="warning">
        I'm a dense alert with the <strong>border</strong> prop and a
        <strong>type</strong> of warning
      </v-alert>
      <v-alert dense outlined type="error">
        I'm a dense alert with the <strong>outlined</strong> prop and a
        <strong>type</strong> of error
      </v-alert>
    </div>
    <br />
    <br />
    <div>
      <v-alert
        v-model="alert"
        border="left"
        close-text="Close Alert"
        color="deep-purple accent-4"
        dark
        dismissible
      >
        Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque.
        Cras dapibus. Vivamus consectetuer hendrerit lacus. Sed mollis, eros et
        ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna
        a orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam
        libero, non adipiscing dolor urna a orci. Curabitur blandit mollis
        lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere
        imperdiet, leo.
      </v-alert>
      <div class="text-center">
        <v-btn
          v-if="!alert"
          color="deep-purple accent-4"
          dark
          @click="alert = true"
        >
          Reset
        </v-btn>
      </div>
    </div>
    <br />
    <br />
    <div>
      <v-alert color="#2A3B4D" dark icon="mdi-firework" dense>
        Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
        Vivamus quis mi. Quisque ut nisi. Maecenas malesuada.
      </v-alert>
      <v-alert color="#C51162" dark icon="mdi-material-design" border="right">
        Phasellus blandit leo ut odio. Morbi mattis ullamcorper velit. Donec
        orci lectus, aliquam ut, faucibus non, euismod id, nulla. In ut quam
        vitae odio lacinia tincidunt.
      </v-alert>
      <v-alert color="primary" dark icon="mdi-vuetify" border="left" prominent>
        Praesent congue erat at massa. Nullam vel sem. Aliquam lorem ante,
        dapibus in, viverra quis, feugiat a, tellus. Proin viverra, ligula sit
        amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi
        mauris ac eros. Curabitur at lacus ac velit ornare lobortis.
      </v-alert>
    </div>
    <br />
    <br />
    <div>
      <v-alert outlined color="purple">
        <div class="title">Lorem Ipsum</div>
        <div>
          Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi,
          condimentum viverra felis nunc et lorem. Duis vel nibh at velit
          scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere,
          tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin
          urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar
          rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet
          eros.
        </div>
      </v-alert>
      <v-alert outlined type="success" text>
        Praesent venenatis metus at tortor pulvinar varius. Aenean commodo
        ligula eget dolor. Praesent ac massa at ligula laoreet iaculis.
        Vestibulum ullamcorper mauris at ligula.
      </v-alert>
      <v-alert outlined type="warning" prominent border="left">
        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis,
        ipsum. Suspendisse non nisl sit amet velit hendrerit rutrum. Nullam vel
        sem. Pellentesque dapibus hendrerit tortor.
      </v-alert>
    </div>
    <br />
    <h3>突出</h3>
    <p>
      prominent 属性通过增加高度并向图标施加光晕来提供更明显的提示。 当同时应用
      prominent 和 dense 时，提示框将会呈现出普通的风格但是会 prominent
      图标特效。
    </p>
    <div>
      <v-alert prominent type="error">
        <v-row align="center">
          <v-col class="grow">
            Nunc nonummy metus. Nunc interdum lacus sit amet orci. Nullam dictum
            felis eu pede mollis pretium. Cras id dui.
          </v-col>
          <v-col class="shrink">
            <v-btn>Take action</v-btn>
          </v-col>
        </v-row>
      </v-alert>
      <v-alert color="blue-grey" dark dense icon="mdi-school" prominent>
        Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui.
        Aenean ut eros et nisl sagittis vestibulum. Sed aliquam ultrices mauris.
        Donec vitae orci sed dolor rutrum auctor.
      </v-alert>
      <v-alert icon="mdi-shield-lock-outline" prominent text type="info">
        Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Sed
        in libero ut nibh placerat accumsan.. Curabitur blandit mollis lacus.
        Curabitur blandit mollis lacus.
      </v-alert>
    </div>
    <br />
    <h3>文本</h3>
    <p>
      text 属性是一个简单的提示框变量，它对所提供的color属性使用不透明的背景。
      类似于其他样式的属性，text 可与 dense, prominent 和 outlined
      等其他属性结合使用，以创建独特的定制组件。
    </p>
    <div>
      <v-alert text color="info">
        <h3 class="headline">Lorem Ipsum</h3>
        <div>
          Maecenas nec odio et ante tincidunt tempus. Sed mollis, eros et
          ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor
          urna a orci. Proin viverra, ligula sit amet ultrices semper, ligula
          arcu tristique sapien, a accumsan nisi mauris ac eros. Curabitur
          turpis.
        </div>

        <v-divider class="my-4 info" style="opacity: 0.22"></v-divider>

        <v-row align="center" no-gutters>
          <v-col class="grow">
            Proin magna. Vivamus in erat ut urna cursus vestibulum. Etiam
            imperdiet imperdiet orci.
          </v-col>
          <v-spacer></v-spacer>
          <v-col class="shrink">
            <v-btn color="info" outlined> Okay </v-btn>
          </v-col>
        </v-row>
      </v-alert>
      <v-alert text outlined color="deep-orange" icon="mdi-fire">
        Nullam tincidunt adipiscing enim. In consectetuer turpis ut velit.
        Maecenas egestas arcu quis ligula mattis placerat. Praesent metus
        tellus, elementum eu, semper a, adipiscing nec, purus.
      </v-alert>
      <v-alert text dense color="teal" icon="mdi-clock-fast" border="left">
        Vestibulum ullamcorper mauris at ligula. Nulla porta dolor. Vestibulum
        facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae
        euismod ligula urna in dolor. Curabitur at lacus ac velit ornare
        lobortis.
      </v-alert>
      <v-alert text prominent type="error" icon="mdi-cloud-alert">
        Praesent blandit laoreet nibh. Praesent nonummy mi in odio. Phasellus
        tempus. Mauris turpis nunc, blandit et, volutpat molestie, porta ut,
        ligula. Duis leo.
      </v-alert>
    </div>
    <br />
    <h3>过渡</h3>
    <p>
      transition 属性可让你向提示框应用一个过渡，该动画在隐藏和显示组件时可见。
      你可以在 Vuetify内建过渡 浏览更多信息，或 创建自己的过渡。
    </p>
    <div>
      <div class="text-center mb-4">
        <v-btn color="primary" @click="alert = !alert"> Toggle </v-btn>
      </div>
      <v-alert
        :value="alert"
        color="pink"
        dark
        border="top"
        icon="mdi-home"
        transition="scale-transition"
      >
        Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum.
        In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
        Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod
        vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque
        facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper
        id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
      </v-alert>
    </div>
    <br />
    <br />
    <div>
      <v-alert
        v-model="alert"
        dismissible
        color="cyan"
        border="left"
        elevation="2"
        colored-border
        icon="mdi-twitter"
      >
        You've got <strong>5</strong> new updates on your timeline!.
      </v-alert>

      <div class="text-center">
        <v-btn v-if="!alert" dark @click="alert = true"> Reset Alert </v-btn>
      </div>
    </div>
    <br />
    <h3>类型</h3>
    <p>
      type 属性提供 4 种默认的 v-alert 样式：success, info, warning, 和 error。
      每个样式都提供默认图标和颜色。 默认颜色可通过 Vuetify主题 进行全局配置。
    </p>
    <div>
      <v-alert type="success"> I'm a success alert. </v-alert>

      <v-alert type="info"> I'm an info alert. </v-alert>

      <v-alert type="warning"> I'm a warning alert. </v-alert>

      <v-alert type="error"> I'm an error alert. </v-alert>
    </div>
    <br />
  </div>
</template>

<script>
export default {
  data: () => ({
    alert: true,
    attritems: [
      {
        name: "dense",
        desc: "窄框模式",
      },
      {
        name: "prominent",
        desc: "突显大框模式",
      },
      {
        name: "outline",
        desc: "非填充边框模式",
      },
      {
        name: "text",
        desc: "文字与padding反转,对所提供的color属性使用不透明的背景",
      },
      {
        name: "dismissible",
        desc: "可关闭的",
      },
      {
        name: "border",
        desc: "边框加粗",
      },
      {
        name: "color",
        desc: "填充颜色",
      },
      {
        name: "icon",
        desc: "图标",
      },
      {
        name: "type",
        desc: "常用图标类型",
      },
    ],
  }),
};
</script>